<template>
  <div class="job-listings">
    <div
      class="company-row"
      v-for="(row, rowIndex) in companyRows"
      :key="rowIndex"
    >
      <div class="company-card" v-for="company in row" :key="company.name">
        <div class="company-header">
          <img :src="company.logo" :alt="company.name" class="company-logo" />
          <div class="company-info">
            <h3>{{ company.name }}</h3>
            <p>{{ company.description }}</p>
          </div>
        </div>
        <div class="job-list">
          <div class="job-item" v-for="job in company.jobs" :key="job.title">
            <div class="job-title-row">
              <h4>{{ job.title }}</h4>
              <span class="salary">{{ job.salary }}</span>
            </div>
            <p class="job-location">{{ job.location }}</p>
            <p class="job-requirements">{{ job.requirements }}</p>
          </div>
        </div>
        <button class="more-jobs-button">查看更多职位</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const companies = [
  {
    name: '鸿创物流',
    logo: '/placeholder.svg?height=50&width=50',
    description: '10000人以上 | 即时配送',
    jobs: [
      {
        title: '永辉有位-一万一',
        salary: '9-13K',
        location: '广州 番禺区 市桥',
        requirements: '经验不限 学历不限'
      },
      {
        title: '鸿创物流招聘配送员',
        salary: '8-11K',
        location: '广州 白云区 三元里',
        requirements: '经验不限 学历不限'
      },
      {
        title: '鸿创物流招聘配送员',
        salary: '9-14K',
        location: '广州 番禺区 市桥',
        requirements: '经验不限 学历不限'
      }
    ]
  },
  {
    name: '凡岛',
    logo: '/placeholder.svg?height=50&width=50',
    description: '1000-9999人 | 电子商务',
    jobs: [
      {
        title: '直播助理',
        salary: '5-7K',
        location: '广州 黄埔区 东圃',
        requirements: '经验不限 大专'
      },
      {
        title: 'wis客服直播助理（大厂）',
        salary: '6-7K',
        location: '广州 天河区 珠江新城',
        requirements: '1-3年 大专'
      },
      {
        title: '财务BP（23-25岁可投 日结）',
        salary: '10-14K',
        location: '广州 黄埔区 东圃',
        requirements: '在校/应届 本科'
      }
    ]
  },
  {
    name: '轻春到家',
    logo: '/placeholder.svg?height=50&width=50',
    description: '10000人以上 | 生活服务(O2O)',
    jobs: [
      {
        title: '急招家电清洗工程师+薪..',
        salary: '8-12K',
        location: '广州 天河区 东圃',
        requirements: '经验不限 初中及以下'
      },
      {
        title: '母婴会所月子后康复师月..',
        salary: '10-15K',
        location: '广州 海珠区 员村',
        requirements: '经验不限 学历不限'
      },
      {
        title: '早级月子中心招高级月嫂',
        salary: '9-14K',
        location: '广州 白云区 三元里',
        requirements: '经验不限 学历不限'
      }
    ]
  }
  // Add more companies here
]

const companyRows = computed(() =>
  companies.reduce((rows, company, index) => {
    if (index % 3 === 0) rows.push([])
    rows[rows.length - 1].push(company)
    return rows
  }, [])
)
</script>

<style scoped>
.job-listings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.company-row {
  display: flex;
  gap: 20px;
}

.company-card {
  flex: 1;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
}

.company-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.company-logo {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.company-info h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.company-info p {
  margin: 5px 0 0;
  color: #999;
  font-size: 12px;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.job-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.job-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.job-item h4 {
  margin: 0;
  font-size: 14px;
  color: #409eff;
}

.salary {
  color: #ff6b6b;
  font-weight: bold;
  font-size: 14px;
}

.job-location,
.job-requirements {
  margin: 2px 0;
  font-size: 12px;
  color: #666;
}

.more-jobs-button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  color: #409eff;
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
}

@media (max-width: 1024px) {
  .company-row {
    flex-direction: column;
  }
}
</style>
